<html>
    <head>
        <meta charset="utf-8">
        <title>使用Vue.js 和 semantic-ui 的一个简单TODO List</title>
        <link rel="stylesheet" href="../assets/stylesheets/global.css">
        <link rel="stylesheet" href="../assets/stylesheets/words.css">
        <link rel="stylesheet" href="../assets/stylesheets/monokai.css">
        <link rel="stylesheet" href="../assets/stylesheets/table.css">
        <link rel="shortcut icon" href="../assets/images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="../assets/images/favicon.ico" type="image/x-icon">
        <script>
            // 统计代码
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-93231524-1', 'auto');
            ga('send', 'pageview');
        </script>
    </head>
    <body>
        <div id="header">
            <a href="../index.html"><div id="logo">JG</div></a>
        </div>
        <div id="container" class="typo">
            <div id="article">
                <h1>使用Vue.js 和 semantic-ui 的一个简单TODO List</h1>
                <h4>Posted August 22, 2016</h4>

                <blockquote class="blockquote-normal">
                <p>项目地址: <strong><a href="https://github.com/jackeyGao/vue-semantic-todos">jackeyGao/vue-semantic-todos</a></strong></p></blockquote>
<p>这是一个完全仿照官网案例的项目, 主要为了熟悉vue.js的基本用法, 不得不说这个案例能吸收到基本的vue.js 操作. </p>

<p>根据重写此项目可以学到下面几个知识点:</p>

<ul>
<li>基本的数据绑定语法</li>
<li>计算属性</li>
<li>Class 绑定</li>
<li>条件渲染</li>
<li>列表渲染</li>
<li>方法与事件绑定</li>
<li>表单空间绑定</li>
<li>自定义指令</li>
</ul>

<p>额外还能学习到<code>localStorage</code>的简单用法.可以说通过详细学习此例子可以完成vue.js最基本的入门操作， 完全熟悉不太容易， 主要是感受下vue.js的思想，和正确的使用方式, 后面还需要多写多看.</p>

<iframe width="100%" scrolling="no" height="600" src="/projects/vue-semantic-ui-todo-list/index.html" frameborder="0"></iframe>

            </div>
            <div id="footer">
                <a href="../words.html"><div id="more-words">MORE WORDS</div></a>
            </div>
        </div>
    </body>
</html>